<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>装车交接记录</title>
  <link rel="stylesheet" href="src/css/iview.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
</head>

<body>
  <div id="app">
    <div class="vue-wrapper">
      <Split v-model="splitModel">
        <div slot="left" class="">
          <div class="page-content">
            <h2 class="table-total">共有<span>{{tableDataRecords}}</span>条交接记录</h2>
            <i-table :columns="tableColumn" :data="tableData" ref="selection" stripe></i-table>
            <div style="margin: 10px;overflow: hidden">
              <div class="tac">
                <Page :total="tableDataRecords" :current="1" @on-change="changePage"></Page>
              </div>
            </div>
          </div>
        </div>
        <div slot="right" class="split-pane-right">
          <div class="page-content" if="showShipmentNumber">
            <h2 class="table-total">本次交接共有<span>{{tableDataRecordsR}}</span>条交接明细</h2>
            <i-table :columns="tableColumnr" :data="tableDatar" ref="selection" stripe></i-table>
            <div style="margin: 10px;overflow: hidden">
              <div class="tac">
                <Page :total="tableDataRecordsR" :current="1" @on-change="changePageR"></Page>
              </div>
            </div>
          </div>
        </div>
      </Split>
    </div>
  </div>
  <script src="src/js/vue.js"></script>
  <script src="src/js/axios.min.js"></script>
  <script src="src/js/iview.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        splitModel: 0.5,
        tableColumn: [{
            type: 'index',
            title: '序号',
            width: 40,
            align: 'center',
            fixed: 'left'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 120,
            fixed: 'left',
            render: (h, params) => {
              return h('div', [
                h('a', {
                  class: 'table-btn'
                }, '打印装车交接单')
              ]);
            }
          },
          {
            title: '交接时间',
            key: 'shipmentNumber',
            width: 170,
            align: 'center'
          },
          {
            title: '承运公司',
            key: 'carrierCompany',
            width: 170,
            align: 'center'
          },
          {
            title: '交接件数',
            key: 'totalNumber',
            width: 60,
            align: 'right'
          },
          {
            title: '交接订单数',
            key: 'deliveredNumber',
            width: 79,
            align: 'right'
          }
        ],
        tableDataRecords: 0,
        tableData: [],
        tableColumnr: [{
          type: 'index',
          title: '序号',
          width: 40,
          align: 'center'
        },  {
          title: '业务单号',
          key: 'businessNumber',
          width: 150,
          align: 'center'
        }, {
          title: '货主',
          key: 'owner',
          width: 170,
          align: 'center'
        }, {
          title: '件数',
          key: 'pieces',
          width: 50,
          align: 'right'
        }, {
          title: '集货区',
          key: 'gatheringArea',
          width: 80,
          align: 'center'
        }, {
          title: '订单日期',
          key: 'orderDate',
          width: 100,
          align: 'center'
        }, {
          title: '收货单位',
          key: 'receivingUnit',
          width: 220,
          align: 'center'
        }, {
          title: '收货人',
          key: 'receiver',
          width: 70,
          align: 'center'
        }, {
          title: '联系电话',
          key: 'tel',
          width: 90,
          align: 'center'
        }, {
          title: '地址',
          key: 'address',
          width: 250,
          align: 'center'
        }, {
          title: '备注',
          key: 'remarks',
          width: 150,
          align: 'center'
        }, {
          title: '交接状态',
          key: 'handoverStatus',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('span', 
                { class: params.row.handoverStatus == "待交接" ? "font-red" : "font-gray" },
                params.row.handoverStatus
              )
            ]);
          }
        }],
        tableDatar: [],
        tableDataRecordsR: 0,
        showShipmentNumber: false
      },
      mounted() {
        this.getTableData()
        this.getTableDataR()
      },
      methods: {
        // 获取表格数据
        getTableData() {
          axios.get('static/schedulingResult.json').then(response => {
            this.tableData = response.data.Datas;
            this.tableDataRecords = response.data.TotalRecords;
          })
        },
        changePage() {
          this.tableData = this.getTableData();
        },
        getTableDataR() {
          axios.get('static/schedulingResult2.json').then(response => {
            this.tableDatar = response.data.Datas;
            this.tableDataRecordsR = response.data.TotalRecords;
          })
        },
        changePageR() {
          this.tableData = this.getTableDataR();
        }
      }
    })
  </script>
</body>

</html>